<style lang="scss" scoped>
    @import '~@/scss/global/colors.scss';
    .ui-sidebar-a /deep/{
        background:$sidebar-bg;
        .el-menu{
            background:transparent;
            border-right:none;
        }
        .el-menu-item, .el-submenu__title{
            height:50px;
            line-height:50px;
            color:$sidebar-txt;
            &:hover{
                background:rgba($sidebar-heightLight, .5);
                color:#fff;
                i{color:#fff;}
            }
            &:focus{
                background:transparent;
            }
        }
        .el-menu-item.is-active{
            background:$sidebar-heightLight !important;
            color:#fff;
        }
        .el-menu-item-group__title{
            padding:0;
        }
        .el-menu--collapse{
            position:relative;
            /*right:8px;*/
        }
        .Sidebar-toggle{
            /*position:absolute;*/
            position:relative;
            width:100%;
            height:30px;
            text-align:center;
            > div{
                width:100%;
                height:30px;
                background:$sidebar-toggle-bg;
                z-index:100;
                cursor:pointer;
                box-shadow:$sidebar-toggle-shadow;
                color:$sidebar-toggle-txt;
                > i{
                    position:relative;
                    left:2px;
                    bottom:2px;
                }
            }
            &:hover{
                > div{
                    visibility:visible;
                }
                > div:hover{
                    visibility:visible;
                    color:$sidebar-toggle-txt-hover;
                }
            }
        }
        .title-icon{
            min-width:22px;
            line-height: 50px;
            margin-right:20px;
            display:inline-block;
            position:relative;
            border-radius:50%;
            text-align:center;
            text-transform:uppercase;
            font-weight:bold;
            &::before{
                font-size:18px;
                position:relative;
                color:#fff;
                font-style:normal;
            }
        }
    }
</style>
<script type="text/jsx">
    export default {
        name: 'ui-sidebar-a',
        props: {
            alwaysCollapse: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                dimmer: true,
                // rawData: null,              //原始数据
                menuData: '',             //临时数据1
                toggleVal: false,         //侧栏折叠控制
                parentState: {            //目录的父级名称
                    title: null,
                    state: null
                },
                menuCache: {               //临时数据2
                    data: '',
                    parentState: {
                        title: null,
                        state: null
                    }
                },
                received: false,          //异步接收数据完成改变值为ture
                currentState: '',         //当前路由的state值
                cont1: '',                //内容区域1 class 变量
                cont2: 'cont2',            //内容区域2 class 变量
                curParent: '',
                isCollapse: false,
                thisPath: null
            }
        },
        mounted() {
            //首次进入调取侧栏折叠状态
            if (window.localStorage.getItem('showsSideBar') !== null) {
                this.toggleVal = true;
            }
            //首次进入
            this.init()
        },
        watch: {
            //监听路由变化后执行动作
            '$route'(to, from) {
                this.$set(this, 'thisPath', to.path.replace('/', ''))
            }
        },
        computed: {
            noLogin() {
                let path = this.$route.fullPath
                return path !== '/loginFed' && path !== '/login' && path !== '/welcome'
            },
            toggleIcon() {
                return [this.toggleVal ? 'bars' : 'ellipsis vertical']
            },
            scrollbarWidth: function() {
                return this.toggleVal ? '65px' : '250px'
                // return { width: this.toggleVal ? '300px': '50px'}
            },
            //原始数据
            rawData() {
                return this.$store.getters.sidebar
            }
        },
        render(h) { //
            if (this.noLogin && this.rawData) {
                return (
                    <div class="ui flex item ui-sidebar-a column ui-sidebar" style={ { width: this.scrollbarWidth } }>
                        <div { ...{ class: ['Sidebar-toggle', this.toggleVal ? 'visible' : ''] } }>
                            <div onClick={ this.toggle } class="ui flex row-center col-center">
                                <i { ...{ class: ['icon', this.toggleIcon] } }></i>
                            </div>
                        </div>
                        <div class="ui item one scrollbar scroll-dark">
                            { this.rawData ? (
                                <el-menu unique-opened collapse={ this.isCollapse }
                                    default-active={ this.thisPath }
                                    style={ { width: this.scrollbarWidth } }{ ...{ on: { open: this.handleOpen } } } { ...{ on: { close: this.handleClose } } }>
                                    { this.rawData.map((item) => {
                                        if (item.subMenu && item.subMenu.length > 0) {
                                            return <el-submenu key={item.state} index={ item.state } popper-class="sidebar-popup">
                                                <template slot="title">
                                                    <i class={[item.icon, "title-icon"]}></i>
                                                    <span slot="title">{ item.title }</span>
                                                </template>
                                                { item.subMenu.map((subItem) => {
                                                    return <el-menu-item-group>
                                                        <el-menu-item key={item.state} index={ subItem.state } on-click={ this.linkTo }>
                                                            <template slot="title">
                                                                <div class="ui flex">
                                                                  <i class={[subItem.icon, "title-icon"]}></i>
                                                                    <span slot="title">{ subItem.title }</span>
                                                                </div>
                                                            </template>
                                                        </el-menu-item>
                                                    </el-menu-item-group>
                                                }) }
                                            </el-submenu>
                                        }else{
                                            return <el-menu-item key={item.state} index={ item.state } onClick={ this.linkTo }>
                                                <i class={[item.icon, "title-icon"]}></i>
                                                <span slot="title">{ item.title }</span>
                                            </el-menu-item>
                                        }
                                    }) }
                                </el-menu>
                            ) : '' }
                        </div>
                    </div>
                )
            }
            return false
        },
        methods: {
            init() {
                let storage = window.localStorage;
                // 首次进入通过缓存判断是否需要折叠
                if (storage.getItem('showsSideBar') === null) {
                    this.toggleVal = false
                    this.isCollapse = false

                }else{
                    this.toggleVal = true
                    this.isCollapse = true
                }
                // 外部控制侧栏折叠
                this.$on('global:sidebarSwitch', (val) => {
                    if (val === 'collapse') {
                        storage.setItem('showsSideBar', '')
                        this.toggleVal = true
                        this.isCollapse = true
                    }else{
                        storage.removeItem('showsSideBar')
                        this.toggleVal = false
                        this.isCollapse = false
                    }
                })

                if(this.alwaysCollapse){
                    storage.removeItem('showsSideBar')
                    this.toggleVal = true
                    this.isCollapse = true
                }


            },
            //展开折叠侧栏方法
            toggle() {

                if(this.alwaysCollapse){
                    return false
                }

                //存储当前展开关闭状态让刷新后能保持住
                let storage = window.localStorage;
                if (storage.getItem('showsSideBar') !== null) {
                    storage.removeItem('showsSideBar')
                    this.toggleVal = false
                    this.isCollapse = false
                }else{
                    storage.setItem('showsSideBar', '')
                    this.toggleVal = true
                    this.isCollapse = true
                }

                // 告诉echart需要重绘
                this.$eventHub.$emit('echartResize', true)
            },
            //打开连接
            linkTo(v) {
                v = `/${v.index}`
                if (this.$store.getters.stopGoBack) { //路由已被锁定状态
                    this.$confirm('当前页面还有未保存的内容，确认要离开吗？', '提示', {
                        type: 'warning'
                    }).then(() => {  //点击确认按钮后
                        this.$store.commit('SET_URL', null);
                        this.$router.replace({
                            path: v
                        });
                    }).catch(() => { //点击取消按钮后
                        return false
                    })
                    // this.$eventHub.$emit('closeThis', v); //提交关闭指令给关闭窗口的组件
                }else{
                    this.$router.replace({
                        path: v
                    });
                }
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            }
        }
    };
</script>
